<style scoped lang='less'>
    .home-page {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        .row {
            color: white;
        }
        background-color: #001F48;

        .mynav {
            list-style-type: none;
            display: inline-block;
            *display: inline;
            zoom: 1;
        }

        .mynav li {
            float: left;
        }

        .mynav li a {
            text-align: center;
            width: 120px;
            display: block;
            text-decoration: none;
            color: #cccccc;
        }

        .mynav li a img {
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mypanel-title {
            background: url('../../assets/image/title.png');
            background-repeat: round;
            background-size: cover;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            margin-top: 15px;
            color: black;
            .title-icon{
                width: 18px;
            }
        }

        .mypanel-content {
            background-color: #001F59;
        }

        .mypanel-bottom {
            background: url('../../assets/image/panel_bottom.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
        }

        .zhiban-content {
            height: 170px;
            width: 100%;
            overflow: auto;
        }

        .zhiban-content::-webkit-scrollbar { /*滚动条整体样式*/
            width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 10px;
        }

        .zhiban-content::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #00698C;
        }

        .zhiban-content::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

        .news-ul {
            margin-bottom: 0;
        }

        .news-ul li {
            list-style-image: url('../../assets/image/li_icon.png');
            color: #cccccc;
            height: 30px;
            line-height: 30px;
            display: flex;
        }
        .news-ul .news-title {
            color: #337ab7;
            margin-left: 10px;
        }

        .my-progress {
            width: 100%;
            background-color: aquamarine;
            height: 10px;
        }

        .my-progress div {
            height: 10px;
            background-color: chocolate;
        }
       .jihua{
          text-align: center;
       }

    }
</style>
<template>
    <div class="home-page">
        <div class="container-fluid">
            <homeNav></homeNav>

            <!--<div class="row" style="justify-content: center;">-->
                <!--<div style="height: 45px; line-height: 45px;color: floralwhite">XXXXXXX智慧管理平台</div>-->
            <!--</div>-->
            <!--<div class="row" style="background-color: #00698C; padding-top: 10px;justify-content: center;">-->
                <!--<div class="col-xs-12">-->
                    <!--&lt;!&ndash; 导航区域 &ndash;&gt;-->

                <!--</div>-->
            <!--</div>-->

            <div class="row">
                <div class="col-md-2">
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_jihua.png" alt="">计划指标</div>
                        <div class="mypanel-content">
                            <p class="jihua">日计划指标</p>
                            <p class="jihua">周计划指标</p>
                            <p class="jihua">月计划指标</p>
                            <p class="jihua">年计划指标</p>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                </div>
                <div class="col-md-10">
                    <div id="zhibiao" style="width: 900px;height:700px;"></div>

                </div>

            </div>
        </div>

        <!-- 新闻浏览对话框 -->
        <div id="newsView" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newsViewModelLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="newsTitle">[News Title]</h4>
                    </div>
                    <div class="modal-body">
                        <p>发布时间：<span id="newsPubDate">[PubDate]</span></p>
                        <p id="newsContent"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻浏览对话框结束 -->
        <!-- 人员查看详情对话框 -->
        <div id="peopleDetail" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newsViewModelLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">人员信息一览</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            <img id="peopleHeadImg" src="" alt="人员头像" style="width: 120px; height: 160px;"/>
                        </p>
                        <p>
                            姓名：<span id="peopleName"></span>
                        </p>
                        <p>
                            性别：<span id="peopleSex"></span>
                        </p>
                        <p>
                            职务：<span id="peopleDuty"></span>
                        </p>
                        <p>
                            所在部门：<span id="peopleOrgName"></span>
                        </p>
                        <p>
                            联系方式：<span id="peopleContact"></span>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import homeNav from '../../components/homeNav'

    export default {
        data() {
            return {
                orgOptions: {},
                innerHeight: '',
                innerWidth: '',
            }
        },
        mounted: function () {
            this.zhibiaoChart2();
        },
        created: function () {
            console.log('create---')
        },
        components:{
            homeNav
        },
        methods: {
            jumpPage: function () {},
            //指标
            zhibiaoChart2() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("zhibiao"));
                // let data =this.genData();
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: '训练',
                        color:'#fff',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    tooltip: {},
                    legend: {
                        data: ['合格率', '优秀率'],
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    radar: {
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        indicator: [
                            { name: '引体向上10个', max: 6500},
                            { name: '3000米跑', max: 16000},
                            { name: '坐姿陆地划船100次', max: 30000},
                            { name: '手榴弹投准30次', max: 38000},
                            { name: '卧推20次', max: 52000},
                            { name: '30x2蛇形腿', max: 25000}
                        ]
                    },
                    series: [{
                        name: '预算 vs 开销（Budget vs spending）',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data : [
                            {
                                value : [4300, 10000, 28000, 35000, 50000, 19000],
                                name : '合格率'
                            },
                            {
                                value : [5000, 14000, 28000, 31000, 42000, 21000],
                                name : '优秀率'
                            }
                        ]
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

        }
    }
</script>
